<template>
  <div class="container">
    <myheader>
        <div slot="left">关注</div>
                        发现
        <div slot="right">最新</div>
    </myheader>
    <div class="content">
      <div class="gang1"></div>

      <p class="p1">
        一起来吐槽
        <span>11.11</span>
      </p>

      <p class="p2">买了就后悔的那些东西</p>    
      <div class="gang2"></div>

      <p class="p3">
        <b>置顶</b>
        <i>有奖活动，那些你买了就后悔的东西</i>
      </p>
      <div class="gang3"></div>

      <myLeiLei />
    </div>

  </div>
</template>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  @include flexbox();
  @include justify-content();
  @include align-items();
}
.content {
  @include overflow(auto);
}
.gang1 {
  @include rect(100%,.02rem);
  @include background-color(#ccc)
}
.gang2 {
  @include rect(100%,.01rem);
  @include background-color(#ccc)
}
.gang3 {
  @include rect(100%,.006rem);
  @include background-color(#ccc)
}

.p1 {
  font:.12rem/.3rem '';
  margin-left: .8rem;
  span {
    font:.22rem/.4rem '';
  } 
}
.p2 {
  font-size:.22rem;
  margin-left: .5rem;
}
.p3 {
  text-indent:.2rem;
  font:.12rem/.45rem '';
  b {
    color: #f00;
    margin-right: .1rem;
  }
}

</style>
      
<script>
import Header from '@/components/Header';
import LeiLei from '@/components/LeiLei';
export default {
  components: {
    myheader: Header,
    myLeiLei: LeiLei
  }
}
</script>
